<template>
    <el-dialog :title="dialogStatus | titleFilter" :close-on-click-modal="false" width="600px" :visible.sync="visible">
        <el-form ref="temp" :model="temp" :rules="rule" label-width="120px" @keyup.enter.native="dataFormSubmit()">

            <el-form-item label="房屋名称:">
                <!-- <el-select v-model="temp.parkId" placeholder="请选择" @change="park_change">
                    <el-option v-for="item in park_options" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select> -->
                <el-input
                    :value="temp.house_info.buildingName+'-'+temp.house_info.unitName+'-'+temp.house_info.floorName+'-'+temp.house_info.name"
                    placeholder="请输入" disabled />
            </el-form-item>

            <el-form-item label="客户名称:">
                <el-input :value="temp.customerName ? temp.customerName : '--'" placeholder="请输入" disabled />
            </el-form-item>

            <el-form-item label="收费项目:" prop="projectId">
                <el-select v-model="temp.projectId" placeholder="请选择" @change="project_change" :disabled="!temp.parkId">
                    <el-option v-for="item in project_options" :key="item.id" :label="item.itemsName" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="收费标准:" prop="standardId">
                <el-select v-model="temp.standardId" placeholder="请选择" :disabled="!temp.projectId" @change="standard_change">
                    <el-option v-for="item in standard_options" :key="item.id" :label="item.criterionName" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <!-- 收费标准是固定单价额时候 使用收费标准里面的单价 -->
            <el-form-item label="单价:" prop="parkId" v-if="temp.standard_node.chargeCriterion == 2">
                <el-input :value="temp.standard_node.unitPrice ? temp.standard_node.unitPrice  : '--'" placeholder="请输入" disabled />
            </el-form-item>

            <!-- 收费标准里面是自定义单机的时候  手动输入单价 -->
            <el-form-item v-else label="单价:" prop="unitPrice">
                <el-input v-model="temp.unitPrice" placeholder="请输入" />
            </el-form-item>

            <el-form-item v-if="temp.standard_node.countMethod == 2" label="面积(m²):">
                <el-input :value="temp.house_info.area ? temp.house_info.area : '--'" placeholder="请输入" disabled />
            </el-form-item>

            <el-form-item v-else label="收费数量:" prop="criterionCount">
                <el-input v-model="temp.criterionCount" placeholder="请输入" />
            </el-form-item>

            <el-form-item label="应收金额:" prop="parkId">
                <el-input :value="billAllMoney" placeholder="请输入" disabled />
            </el-form-item>

            <!-- <el-form-item label="选择房屋:" prop="houses_options">
                <el-tree :data="houses_options" ref="house_tree" show-checkbox node-key="id" :props="houses_props"
                    @check-change="houses_change" :default-checked-keys="temp.house_checked">
                </el-tree>
            </el-form-item> -->

            <el-form-item label="开始/结束月份" prop="beginTime_endTime">
                <el-date-picker v-model="temp.beginTime_endTime" style="width:100%" type="monthrange" format="yyyy 年 MM 月"
                    value-format="yyyy-MM" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份">
                </el-date-picker>
            </el-form-item>

            <!-- <el-form-item label="收费项目" prop="itemsName">
                <el-input v-model="temp.itemsName" placeholder="请输入" />
            </el-form-item> -->

            <!-- <el-form-item label="是否周期费用" prop="billingCycleFlag_type">
                <el-select v-model="temp.billingCycleFlag_type" placeholder="请选择">
                    <el-option v-for="item in billingCycleFlagType_" :key="item.value" :label="item.lable" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="账单精确到" prop="moneyAccurate_type">
                <el-select v-model="temp.moneyAccurate_type" placeholder="请选择">
                    <el-option v-for="item in moneyAccurateType_" :key="item.value" :label="item.lable" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="是否启用" prop="projrct_state">
                <el-select v-model="temp.projrct_state" placeholder="请选择">
                    <el-option v-for="item in projectState_" :key="item.value" :label="item.lable" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item> -->

        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">
                取消
            </el-button>
            <el-button type="primary" @click="dataFormSubmit">
                确认
            </el-button>
        </span>
    </el-dialog>
</template>
<script>
import { getChargeList, getFinancecriterionList, createFinancebillbatch, saveTemporary } from '@/api/charge'// 请求数据  收费标准
import { getParkListAll, getTreeHouseList } from '@/api/assets'// 请求数据 固定资产
import { projectState, billingCycleFlagType, moneyAccurateType } from '@/utils/enum' //字典
export default {
    filters: {
        // 过滤弹框的标题
        titleFilter (type) {
            const textMap = {
                create: '添加临时应收',
                update: '修改'
            }
            return textMap[type]
        }
    },
    computed: {
        projectState_ () {
            // let arr = [{ lable: '全部', value: '' }]
            let arr = []
            for (let key in projectState) {
                arr.push({
                    lable: projectState[key],
                    value: key
                })
            }
            return arr
        },
        billingCycleFlagType_ () {
            // let arr = [{ lable: '全部', value: '' }]
            let arr = []
            for (let key in billingCycleFlagType) {
                arr.push({
                    lable: billingCycleFlagType[key],
                    value: key
                })
            }
            return arr
        },
        moneyAccurateType_ () {
            // let arr = [{ lable: '全部', value: '' }]
            let arr = []
            for (let key in moneyAccurateType) {
                arr.push({
                    lable: moneyAccurateType[key],
                    value: key
                })
            }
            return arr
        },
        billAllMoney () {
            if (!this.temp.standard_node.chargeCriterion || !this.temp.standard_node.countMethod) {
                return 0
            }
            //收费标准是固定单价额时候 使用 收费标准里面带的 单价 否则使用手填的单价
            //收费标准的计算单位  是 2 的时候 单价*面积  ，是1的时候 单价 * 数量
            let unit_price = this.temp.standard_node.chargeCriterion == 2 ? this.temp.standard_node.unitPrice : this.temp.unitPrice
            let number = this.temp.standard_node.countMethod == 2 ? this.temp.house_info.area : this.temp.criterionCount
            return unit_price * number
        }
    },
    data () {
        return {
            visible: false,
            dialogStatus: '', // 弹框新增或者修改
            temp: { // 表单数据
                id: '',
                // parkId: '',//园区id
                projectId: '',//项目id
                standardId: '',//标准id
                standard_node: {},//选中的标准node节点
                // houseIdList: [],//选中房屋 list
                house_checked: [],//默认选中 的房屋 list 修改时用
                beginTime_endTime: '',//开始结束月份
                house_info: {
                    parkId: "",
                    buildingId: "",
                    unitId: "",
                    floorId: "",
                    id: "",
                    parkName: "",
                    buildingName: "",
                    unitName: "",
                    floorName: "",
                    name: "",
                },//房屋信息
                customerName: "",//客户名字
                customerId: "",//客户id
                criterionCount: 0,//收费数量 
                unitPrice: 1,//单价
            },
            rule: {
                projectId: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                standardId: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                unitPrice: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                criterionCount: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                beginTime_endTime: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],

            },
            // park_options: [],//园区list
            project_options: [],//项目list
            standard_options: [],//标准list
            // houses_options: [],// 单元/层/房屋 tree
            // houses_props: {
            //     // children: 'children',
            //     // label: 'label',
            //     label: 'storeyName',
            //     value: 'id',
            //     children: "list"
            // }
        }
    },
    created () {
        // this.getPark()
    },
    methods: {
        // 初始化
        init (status, param) {
            console.log(param)
            this.dialogStatus = status // 标题
            this.visible = true // 显示
            // this.$nextTick(() => { // 重置表单
            //     this.$refs['temp'].clearValidate()
            // })
            this[status](param) // 新增或者修改
        },
        create (param) {
            this.resetTemp(param) // 清空表单
        },
        // async update (param) {
        //     // console.log(param)
        //     this.getCharge()
        //     let data = Object.assign({}, param)//从上一页带过来当前的数据
        //     // const { data, code } = await getParkDetails({}, param.id) // 从后台获取当前的的数据
        //     // 成功
        //     this.temp.id = data.id
        //     this.temp.parkId = data.parkId
        //     this.temp.parkName = data.parkName
        //     this.temp.itemsName = data.itemsName
        //     this.temp.billingCycleFlag_type = data.billingCycleFlag
        //     this.temp.moneyAccurate_type = data.moneyAccurateType
        //     this.temp.projrct_state = data.enableFlag

        // },
        // 新增数据清空表单数据
        resetTemp (param) {
            this.temp = {
                id: '',
                parkId: param.parkId,//园区id
                projectId: '',//项目id
                standardId: '',//标准id
                standard_node: {},//选中的node节点
                houseIdList: [param.id],//选中房屋 list
                house_checked: [],//默认选中 的房屋 list 修改时用
                beginTime_endTime: '',//开始结束月份
                house_info: param,//房屋里面的数据
                customerName: param.customerName, //客户名称
                customerId: param.customerId,  //客户id
                criterionCount: 0,//收费数量
                billAllMoney: 0,//应收金额
                unitPrice: 0,//单价
            }
            this.project_options = []
            this.standard_options = []
            this.houses_options = []
            // this.getCustomer()
            this.getCharge()
        },

        //获取园区list
        // async getPark () {
        //     const res = await getParkListAll().catch(e => { })
        //     // 失败
        //     if (!res) { this.listLoading = false; return }
        //     // 成功
        //     const { data, code, message } = res
        //     this.park_options = data
        //     // console.log("++++", data)
        // },
        //获取项目list
        async getCharge () {
            let params = {
                parkId: this.temp.parkId
            }
            const res = await getChargeList(params).catch(e => { })
            // 失败
            if (!res) { this.listLoading = false; return }
            // 成功
            const { data, code, message } = res
            this.project_options = data
            console.log("项目list", data)
            // this.project_change(this.temp.project_id)
        },
        //获取标准list
        async getStandard () {
            let params = {
                itemsId: this.temp.projectId
            }
            const res = await getFinancecriterionList(params).catch(e => { })
            // 失败
            if (!res) { this.listLoading = false; return }
            // 成功
            const { data, code, message } = res
            this.standard_options = data
            console.log("标准list", data)
            // this.project_change(this.temp.project_id)
        },
        //获取 房屋树形
        // async getTreeHouseList () {
        //     let params = {
        //         parkId: this.temp.parkId
        //     }
        //     const res = await getTreeHouseList(params).catch(e => { })
        //     // 失败
        //     if (!res) { this.listLoading = false; return }
        //     // 成功
        //     const { data, code, message } = res
        //     console.log(data)
        //     let data_ = data.filter(el => {
        //         return el.parkId == this.temp.parkId
        //     });
        //     this.houses_options = this.set_tree(data_[0].list)
        //     console.log("++++", data_)
        // },
        // set_tree (data) {
        //     function treeArr (arr) {
        //         arr.forEach((item, index) => {
        //             if (item.name) item.storeyName = item.name;
        //             if (item.list && item.list.length > 0) {
        //                 treeArr(item.list)
        //             }
        //         })
        //         return arr
        //     }
        //     let res = treeArr(data)
        //     return res
        // },
        // 表单提交
        dataFormSubmit () {
            this.$refs['temp'].validate(async (valid) => {
                if (!valid) return
                // let park = this.park_options.filter(item => {
                //     return this.temp.parkId == item.id
                // })
                let project = this.project_options.filter(item => {
                    return this.temp.projectId == item.id
                })
                let standard = this.standard_options.filter(item => {
                    return this.temp.standardId == item.id
                })
                const params = {
                    'id': this.temp.id || undefined,
                    'houseId': this.temp.house_info.id,
                    'itemsId': this.temp.projectId,
                    'criterionId': this.temp.standardId,
                    'beginTime': this.temp.beginTime_endTime[0],
                    'endTime': this.temp.beginTime_endTime[1],
                    'customerId': this.temp.customerId,
                    'criterionCount': this.temp.standard_node.countMethod == 2 ? this.temp.house_info.area : this.temp.criterionCount,
                    'criterionUnitPrice': this.temp.standard_node.chargeCriterion == 2 ? this.temp.standard_node.unitPrice : this.temp.unitPrice

                    // 'parkId': this.temp.parkId,
                    // 'parkName': this.temp.house_info.parkName,
                    // 'criterionId': this.temp.standardId,
                    // 'criterionName': standard[0].criterionName,
                    // 'itemsId': this.temp.projectId,
                    // 'itemsName': project[0].itemsName,
                    // 'houseIdList': this.temp.houseIdList,
                }
                const textMap = {
                    create: saveTemporary, // 新增
                    // update: upDataCharge // 修改
                }

                // 提交表单
                const { code, message } = await textMap[this.dialogStatus](params)

                // 成功
                this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                        this.visible = false
                        this.$emit('getList')
                    }
                })
            })
        },

        // ===>>>>>>>>>

        // 选择园区
        // park_change (e) {
        //     // console.log(e)
        //     this.getCharge();
        //     this.getTreeHouseList()
        // },
        //选择项目
        project_change (e) {
            this.getStandard()
        },
        //选择标准
        standard_change (e) {
            let standard_ = this.standard_options.filter(item => {
                return item.id == e
            })
            this.temp.standard_node = standard_[0]
            console.log(this.temp.standard_node)
        }
        //选择房屋
        // houses_change (data, checked, indeterminate) {
        //     //所选数据 是否选中
        //     let houses = this.$refs.house_tree.getCheckedNodes(true, false);
        //     let houses_ = houses.filter(item => {
        //         return item.name
        //     }).map(el => {
        //         return el.id
        //     })
        //     console.log(houses, houses_)
        //     this.temp.houseIdList = houses_
        // }



    }
}
</script>

<style lang="scss">
.mod-menu {
    .menu-list__input,
    .icon-list__input {
        > .el-input__inner {
            cursor: pointer;
        }
    }
    &__icon-popover {
        width: 458px;
        overflow: hidden;
    }
    &__icon-inner {
        width: 478px;
        max-height: 258px;
        overflow-x: hidden;
        overflow-y: auto;
    }
    &__icon-list {
        width: 458px;
        padding: 0;
        margin: -8px 0 0 -8px;
        > .el-button {
            padding: 8px;
            margin: 8px 0 0 8px;
            > span {
                display: inline-block;
                vertical-align: middle;
                width: 18px;
                height: 18px;
                font-size: 18px;
            }
        }
    }
    .icon-list__tips {
        font-size: 18px;
        text-align: center;
        color: #e6a23c;
        cursor: pointer;
    }
}
</style>
